<template>
  <n-space>
    <!--  {{modelValue}}{{fullPathList}}-->
    <n-upload v-if="modelValue.toEdit" :action="submitFile" :headers="{
      'token': userStore.getToken().token
    }" :data="{
  'naive-data': 'cool! naive!'
}" @finish="upload">
      <n-button>上传文件</n-button>
    </n-upload>
    <div id="image-scroll-container" style="overflow: auto; height: 100px; display: flex; flex-direction: row; gap: 8px">
      <!--          <draggable-->
      <!--              :list="modelValue.picList"-->
      <!--              animation="500"-->
      <!--              @start="drag = true"-->
      <!--              @end="drag = false"-->
      <!--              item-key="id"-->
      <!--          > <div v-for="element in modelValue.picList" :id="element" class="list-element">{{element}}</div>-->
      <!--          </draggable>-->
      <n-image v-for="(src, index) in modelValue.picList" :key="src" :id="src" width="100" height="100"
        :src="baseAddress + '/images/' + src" :intersection-observer-options="{
          root: '#image-scroll-container',
        }" @contextmenu.prevent="onContextmenu($event, src)">
        <template #placeholder>
          <div style="
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #0001;
          ">
            Loading
          </div>
        </template>
      </n-image>
    </div>
  </n-space>
  <n-dropdown :disabled="!modelValue.toEdit" placement="bottom-start" trigger="manual" :x="xRef" :y="yRef"
    :options="options" :show="showDropdownRef" :on-clickoutside="onClickoutside" @select="handleSelect" />
</template>
<script lang="ts" setup>
import { computed, h, onMounted, ref, watch } from "vue";
import draggable from "vuedraggable";
import { baseAddress, submitFile } from "@/api/url";
import { NImage, UploadFileInfo } from "naive-ui";
import useUserStore from "@/store/modules/user";

const upload = (options: any): UploadFileInfo => {
  console.log(options)
  console.log(options.event)
  return options.file;
}

const userStore = useUserStore()
const props = defineProps<{
  modelValue: {
    toRemovePicList: Array<string>
    picList: Array<string>;
    toEdit: boolean
    [key: string]: any
  }
}>();
const emit = defineEmits(["update:modelValue"]);
const modelValue = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val),
});

const drag = ref(false)


// 右键菜单
// const message = useMessage();
const options = [
  {
    label: "下载",
    key: "save",
  },
  {
    label: () => h("span", { style: { color: "red" } }, "删除"),
    key: "delete",
  },
];
const showDropdownRef = ref(false);
const xRef = ref(0);
const yRef = ref(0);
const onClickoutside = () => {
  showDropdownRef.value = false;
};
const onContextmenu = (e: MouseEvent, src: string) => {
  // message.info(JSON.stringify(row, null, 2));
  showDropdownRef.value = true;
  xRef.value = e.clientX;
  yRef.value = e.clientY;
  // console.log('rowProps',row)
  file.value = src;
};
let file = ref("");
const handleSelect = async (key: string, node: string) => {
  console.log(key, node);
  showDropdownRef.value = false;
  if (key == "save") {
    // editSettings.toEdit = true;

  }
  if (key == "delete") {
    deleteFile(file.value, modelValue.value.picList);
  }
};
// 删除文件
const deleteFile = (file: string, basePathList: Array<string>) => {
  if (modelValue.value.toEdit) {
    let index = -1;
    const string = basePathList.find((value, index1) => {
      if (value === file) {
        index = index1;
        return true;
      }
    });
    if (index !== -1 && string !== undefined) {
      modelValue.value.toRemovePicList.push(string);
      // fullPathList.splice(index, 1);
      basePathList.splice(index, 1);
    }
  }
};

// watch(modelValue.value, getFullPath);
// onMounted(getFullPath);
</script>
<style>
.list-element {
  padding: 10px;
  background: #eee;
}
</style>
